<template>
  <div class="display">
    <div ref="wrapper1" class="bgc1">
      <ul>
        <li :class="{'current':currentIndex ===0}" @click="select(0)">12</li>
        <li
          @click="select(index+1)"
          v-for="(item,index) in 6"
          :key="index"
          class="foodlist"
          :class="{'current':currentIndex ==index+1}"
        >{{item}}</li>
      </ul>
    </div>
    <!-- content -->
    <div ref="wrapper" class="bgc">
      <ul>
        <li class="foodlist">这里没哟</li>
        <li v-for="(item,index) in 6" :key="index" class="foodlist">{{item}}</li>
        <li></li>
      </ul>
    </div>
    <div class="width" ref="width"></div>
  </div>
</template>

<script>
import bScroll from "better-scroll";
export default {
  name: "",
  data() {
    return {
      listHeight: [],
      menuScroll: {},
      foodScroll: {},
      scrollY: {},
    };
  },
  computed: {
    // 下标
    currentIndex() {
      for (let i = 0; i < this.listHeight.length; i++) {
        // 商品范围
        let height1 = this.listHeight[i];
        let height2 = this.listHeight[i + 1];
        // 是否在上面的区间
        if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
          // console.log(i);
          return i;
        }
      }
      return 0;
    },
  },
  created() {
    this.isScroll();
    this.calHeight();
    this.widthsc();
  },
  methods: {
    widthsc() {
      console.log(123);
      this.$nextTick(() => {
        this.$refs.width,
          {
            scrollX: true,
          };
      });
    },
    isScroll() {
      this.$nextTick(() => {
        this.mmenuScroll = new bScroll(this.$refs.wrapper1, {
          click: true,
        });

        this.foodScroll = new bScroll(this.$refs.wrapper, {
          probeType: 3,
          click: true,
        });
        // 监听scroll
        this.foodScroll.on("scroll", (pos) => {
          // probeType默认是0，设置为3才能打开
          // console.log(pos.y);
          // 取整abs取绝对值,round四进五出
          this.scrollY = Math.abs(Math.round(pos.y));
          // console.log(this.scrollY);
        });
      });
    },
    calHeight() {
      this.$nextTick(() => {
        let foodlist = this.$refs.wrapper.getElementsByClassName("foodlist");
        // console.log(foodlist);
        let height = 0;
        this.listHeight.push(height);
        for (let i = 0; i < foodlist.length; i++) {
          let item = foodlist[i];
          height += item.clientHeight;
          this.listHeight.push(height);
        }
      });
    },
    select(index) {
      // console.log(index);
      let foodlist = this.$refs.wrapper.getElementsByClassName("foodlist");
      let element = foodlist[index];
      //  滚动到相应的位置
      console.log(element);
      this.foodScroll.scrollToElement(element, 250);
    },
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.display {
  display: flex;
}
.bgc1 {
  flex: 0 0 100px;
}
.bgc1 ul li {
  margin: 20px 0 20px 20px;
  background-color: yellow;
}
.bgc {
  height: 150px;
  width: 200px;
  background-color: red;
  ul {
    li {
      width: 100%;
      height: 100px;
      background-color: #eee;
      border-bottom: 3px solid skyblue;
      z-index: -10000;
    }
  }
}
.current {
  border-bottom: 2px solid red;
}
.width {
  width: 150px;
  height: 100%;
  overflow: hidden;
}
</style>